<template>
	<view class="parking">
		<!-- 车辆缴费 -->
		<view class="content" :style="cuindex == 0 ? ' display:black' : ' display: none'">
			<view class="title">请您输入车牌</view>
			<car-number-input @numberInputResult="numberInputResult" :defaultStr="defaultNum"></car-number-input>
			<view class="btn" @click="CheckParking()">提交绑定</view>
		</view>
	</view>
</template>

<script>
	// import carNumberInput from '@/components/car-number-input'
	import carNumberInput from '@/components/car-number-input/car-number-input.vue'
	import {  adduserCar } from '@/core/api/index.js'
	export default{
		components:{
			carNumberInput
		},
		data(){
			return{
				defaultNum:'沪A',
				show:true,
				plist:['沪','','','','','','',''],
				plateNo:'',
				cuindex:0,
				chebox:[
					{
						name:'车牌缴费'
					},
					{
						name:'我的车辆'
					},
					{
						name:'缴费记录'
					}
				]
			}
		},
		onLoad() {
			// this.UserCar()
			// this.UserCarpage()
		},
		methods:{
			AddCour(){
				console.log(11)
			},
			numberInputResult(e){
				console.log('结果--'+e)
				this.plateNo = e
			},
			async UserCar(){
				let parme = {
					plateNo:'沪A45986'
				}
				const res = await userCar(parme)
				console.log(res)
			},
			async UserCarpage(){
				console.log(11)
				let prames = {
					page:1,
					size:20
				}
				const { data } = await userCarpage(prames)
			    console.log(data)
			 },
			 async CheckParking(){
				 console.log(this.plateNo.length)
				 // if(this.plateNo.length > 6){
					//  uni.showToast({
					//  	title:'请输入车牌号',
					// 	icon:'none'
					//  })
					//  return
				 // }
				uni.showLoading({
					title:'请求中...'
				})
				const reows = await adduserCar({plateNo:this.plateNo})
				if(reows.code == '00000'){
				   setTimeout(()=>{
				   	uni.hideLoading()
				   	uni.navigateBack({delta:1})
				   },1000)	
				}else{
					uni.showToast({
						title:reows.message,
						icon:'none'
					})
				}
				// console.log(data,'--')
			},
			Selce(index){
				console.log(index)
				this.cuindex = index
				uni.setNavigationBarTitle({
				  title: this.chebox[index].name
				});
				uni.showLoading({
					title:'加载中...'
				})
				setTimeout(()=>{
					uni.hideLoading()
				},1000)
			}
		}
	}
</script>
<style>
	page{
		background-color: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	.parking{
		.content{
			background-color: #fff;
			min-height: 42vh;
			padding-bottom: 80rpx;
		}
		.banner{
			width: 100%;
			image{
				width: 100%;
			}
		}
		.title{
			padding: 50rpx 40rpx 20rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #969696;
		}
		.plist{
			display: flex;
			padding:  0 22rpx;
			justify-content: space-between;
			.conet{
				width: 72rpx;
				height: 80rpx;
				background: #F0EFED;
				border-radius: 10rpx;
			}
		}
		.btn{
			background: #F26B2E;
			margin:  60rpx 22rpx;
			// width: 100%;
			height: 80rpx;
			color: #fff;
			font-size: 32rpx;
			text-align: center;
			line-height: 80rpx;
			border-radius: 60rpx;

		}
		.describe{
			width: 160rpx;
			height: 60rpx;
			border-radius: 40rpx;
			border: 1px solid #E8E8E8;
            color: #6BC7C3;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			margin: 0 auto;
			justify-content: center;
			image{
				width: 26rpx;
				height: auto;
				margin-right: 6rpx;
			}
		}
		.operation{
			height: 172rpx;
			background-color: #fff;
			border-radius: 160rpx;
			padding: 0 80rpx;
			margin:  120rpx 22rpx;
			filter: drop-shadow(0px -4px 14px rgba(0, 0, 0, 0.06)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.06));
			display: flex;
			align-items: center;
			    justify-content: space-between;
			.op_itme{
				display: flex;
				flex-direction: column;
				align-items: center;
				.img{
					width: 60rpx;
					// height:  auto;
					image{
						width: 60rpx;
					}
				}
				.name{
					font-size: 26rpx;
				}
			}
		}
		.myche{
			background-color: #fff;
			margin: 20rpx 20rpx;
			border-radius: 20rpx;
			min-height: 600rpx;
			padding: 40rpx 0;
			.my_itme{
				width: 95%;
				height: 140rpx;
				padding: 0 20rpx;
				margin: 0 auto;
				display: flex;
				align-items: center;
				background-color: #EFF7FB;
				justify-content: space-between;
				border-radius: 12rpx;
				.left{
					font-size: 40rpx;
					font-weight: 500;
					color: #000;
				}
				.right{
					display: flex;
					padding-right: 10rpx;
					view:nth-child(1){
						background-color: #F26B2E;
						width: 108rpx;
						height: 48rpx;
						border-radius: 40rpx;
						text-align: center;
						line-height: 47rpx;
						color: #fff;
						font-size: 24rpx;
						margin-right: 20rpx;
					}
					view:nth-child(2){
						border: 1px solid #6D8893;
						width: 88rpx;
						height: 44rpx;
						border-radius: 40rpx;
						text-align: center;
						line-height: 42rpx;
						color: #6D8893;
						// color: #fff;
						font-size: 24rpx;
					}
				}
			}
			.add{
				color: #F26B2E;
				font-size: 36rpx;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 80rpx auto;
				image{
					width: 30rpx;
					margin-right: 10rpx;
					height: auto;
				}
			}
		}
	}
</style>